<!--
 * @Author: MarsLay
 * @Date: 2021-12-23 09:39:56
 * @LastEditTime: 2023-12-25 18:23:44
 * @LastEditors: MarsLay 331412466@qq.com
 * @Description: 自定义筛选,支持单选/复选/多级复选 清空数据
 * @FilePath: \smart-sports-managee:\project\autopilot\components\filter\filter.vue
-->
<template>
  <view class="filter" :class="{ 'cover': selectShow || screenShow }">
    <view v-if="selectShow || screenShow" @click="close" class="mask"
      :style="{ 'top': nav ? `calc(${nav.navHeight + 50 + 60}px)` : `calc(${param.top + 50}px + var(--status-bar-height))` }">
    </view>
    <view v-if="selectShow || screenShow" class="select"
      :style="{ 'top': nav ? `calc(${nav.navHeight + 50 + 60}px)` : `calc(${param.top + 50}px + var(--status-bar-height))` }">
      <view v-if="selectShow" class="inner scroll">
        <checkbox-group @change="checkboxChange" :key="currentSelect.key">
          <view class="single-option input" v-if="currentSelect.type == 'range'">
            <view class="label">
              <input type="number" :placeholder="rangeInput[0].placeholder" v-model="rangeInput[0].value">
              <view class="line">-</view>
              <input type="number" :placeholder="rangeInput[1].placeholder" v-model="rangeInput[1].value">
            </view>
          </view>
          <label @click="changeSelect(v, i)" class="single-option" :class="{ 'active': v.isActive }"
            v-for="(v, i) in currentSelect.child" :key="i">
            <view class="label">{{ v.title }}</view>
            <checkbox v-if="handlerShow" :value="String(v[currentSelect.match])" :checked="v.checked" />
          </label>
        </checkbox-group>
      </view>
      <view v-if="screenShow" class="inner screen-inner">
        <view class="sort scroll">
          <view @click="changeSort(i)" class="single" :class="{ 'active': sortIndex == i }" v-for="(v, i) in param.screen"
            :key="v.id">{{ v.title }}</view>
        </view>
        <view class="options scroll">
          <checkbox-group @change="checkboxChangeScreen">
            <label class="single" v-for="v in currentSort.child" :key="v.id">
              <view class="label">{{ v.title }}</view>
              <checkbox v-if="screenShow" :value="String(v[currentSort.match])" :checked="v.checked" />
            </label>
          </checkbox-group>
        </view>
      </view>
      <b-button v-if="handlerShow || screenShow" :param="buttonParam" @handler="handler"></b-button>
    </view>
    <view class="inner">
      <view class="scroll-view" :style="{ width: `${param.screen.length > 0 ? '80%' : '100%'}` }">
        <scroll-view class="scroll" scroll-x="true" scroll-with-animation="true" :scroll-into-view="toView">
          <view @click="openSelect(v, i)" class="single" :class="{ 'active': v.ntitle }" :id="'channel' + i"
            v-for="(v, i) in selectList" :key="v.id">
            <view class="title single-ellipsis">{{ v.ntitle || v.title }}</view>
            <image class="arrow-icon" mode="aspectFit" :src="selectShow && selectIndex == i ? arrow[0] : arrow[1]">
            </image>
          </view>
        </scroll-view>
      </view>
      <view v-if="canScreen" class="screen" @click="openScreen">
        <view>筛选</view>
        <image mode="aspectFit" class="screen-icon" src="../../static/img/icon/screen.png"></image>
      </view>
    </view>
  </view>
</template>

<script>
import bButton from "@/components/button/button";

export default {
  name: "lFilter",
  components: { bButton },
  props: {
    top: {
      type: Number,
      default: 44,
    },
    param: {
      type: Object,
      default: () => ({}),
    },
    screen: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      arrow: [
        "../../static/img/icon/arrow-up.png",
        "../../static/img/icon/arrow-down.png",
      ],
      rangeInput: [
        { placeholder: "最小", value: "" },
        { placeholder: "最大", value: "" },
      ],
      toView: "",
      selectShow: false,
      selectIndex: -1,
      screenShow: false,
      sortIndex: 0,
      buttonParam: {
        type: "connect",
        width: "530upx",
        fontSize: "32upx",
        list: [
          {
            title: "重置",
            value: 0,
            color: "#1D246A",
            bgcolor: "#1D246A",
            bgcolorInner: "#ffffff",
            border: "2upx solid #1D246A",
            bdradius: "40upx 0 0 40upx",
            bdradiusInner: "40upx 0 40upx 40upx",
          },
          {
            title: "确定",
            value: 1,
            bgcolor: "#1D246A",
            color: "#ffffff",
            bdradius: "0 40upx 40upx 0",
          },
        ],
      },
      selectList: this.param.select
    };
  },
  computed: {
    currentSelect() {
      return this.param.select[this.selectIndex];
    },
    handlerShow() {
      if (this.currentSelect) {
        return this.currentSelect.type != "single";
      }
    },
    canScreen() {
      return this.param.screen.length > 0;
    },
    currentSort() {
      return this.param.screen[this.sortIndex];
    },
    nav() {
      return uni.getStorageSync("navInfo");
    },
  },
  watch: {
    rangeInput: {
      handler(v) {
        if (v.every((x) => x.value)) {
          this.currentSelect.tempValue.input = `${v[0].value}-${v[1].value}`;
        }
      },
      deep: true,
    },
    "currentSelect.tempValue": {
      handler(v) {
        if (!this.currentSelect) return;
        if (this.currentSelect.type == "range") {
          let arr = v.input ? [v.input, ...v.value] : v.value;
          this.screen[this.currentSelect.key] = this.$util
            .newSet(arr)
            .join(",");
          let txt = [];
          this.currentSelect.child.map((x) => x.checked && txt.push(x.title));
          v.input && txt.unshift(v.input);
          this.currentSelect.ntitle = txt.join(",");
        }
      },
      deep: true,
    },
  },
  onLoad(d) { },
  created() {
    this.param.select.map((v) => v.child.map((x) => (x.checked = false)));
    this.param.screen.map((v) => v.child.map((x) => (x.checked = false)));
    console.log(this.param);
  },
  methods: {
    changeSort(i) {
      this.sortIndex = i;
    },
    checkboxChange(v) {
      this.currentSelect.child.map(
        (x) =>
          (x.checked = v.detail.value.includes(x[this.currentSelect.match]))
      );
      this.currentSelect.tempValue.value = v.detail.value;
      this.$forceUpdate();
    },
    checkboxChangeScreen(v) {
      this.currentSort.child.map(
        (x) =>
        (x.checked = v.detail.value.includes(
          String(x[this.currentSort.match])
        ))
      );
      this.screen[this.currentSort.key] = v.detail.value.join(",");
      this.$forceUpdate();
    },
    changeSelect(v, i) {
      if (this.currentSelect.type == "range") {
        return;
      }
      this.currentSelect.ntitle =
        v.id == "" ? v.title + this.currentSelect.title : v.title;
      this.screen[this.currentSelect.key] = v.id;
      this.close();
      this.param.select[this.selectIndex].child.map(a => a.isActive = a.id == v.id);
      this.selectList = this.param.select;
      this.$emit('change', { key: this.currentSelect.key, value: this.screen[this.currentSelect.key] });
    },
    openSelect(v, i) {
      this.selectIndex = i;
      // this.toView = `channel${v.id}`;
      // if (this.currentSelect.type == "range") {
      //   if (this.currentSelect.tempValue.input == "") {
      //     this.rangeInput.map((v) => (v.value = ""));
      //   } else {
      //     this.rangeInput.map(
      //       (x, i) =>
      //         (x.value = this.currentSelect.tempValue.input.split("-")[i])
      //     );
      //   }
      // }
      this.selectShow = true;
      this.screenShow = false;
    },
    close() {
      this.selectShow = false;
      this.screenShow = false;
    },
    clear() {
      if (this.selectShow) {
        this.currentSelect.child.map((v) => (v.checked = false));
        this.currentSelect.tempValue = { input: "", value: [] };
        this.rangeInput.map((v) => (v.value = ""));
      } else {
        this.currentSort.child.map((v) => (v.checked = false));
        this.param.screen.map((v) => (this.screen[v.key] = ""));
      }
      this.$forceUpdate();
    },
    openScreen() {
      this.selectShow = false;
      this.screenShow = true;
    },
    handler(v) {
      this[v == 0 ? "clear" : "close"]();
    },
  },
};
</script>
<style lang='less' scoped>
.filter {
  z-index: 9;
  position: relative;

  >.inner {
    .flex();
    width: 100%;
    height: 50px;
    font-size: 30upx;
    color: #888990;
    background: #ffffff;

    .scroll-view {
      position: relative;
      display: flex;
      white-space: nowrap;
      align-items: center;
      background: #ffffff;
      padding: 0 20upx;
      width: 80%;
      height: 100%;

      .scroll {
        width: calc(100% - 0upx);
      }

      .scroll ::-webkit-scrollbar {
        display: none;
        width: 0;
        height: 0;
        color: transparent;
      }

      .single.active {
        color: #1ca9ff;
      }

      .single {
        position: relative;
        display: inline-block;
        padding: 0 30upx;
        font-size: 30upx;
        color: #888990;

        .title {
          margin-right: 30upx;
          max-width: 150upx;
        }

        .arrow-icon {
          position: absolute;
          top: 50%;
          right: 0;
          transform: translate(-50%, -50%);
        }
      }
    }

    .scroll-view::after {
      content: "";
      position: absolute;
      top: 50%;
      right: 0;
      transform: translate(0, -50%);
      width: 2upx;
      height: 50upx;
      background: #f1f1f2;
    }

    .screen {
      .flex(row, flex-start);
      padding: 0 30upx;

      .screen-icon {
        margin-top: 5upx;
        margin-left: 5upx;
        width: 30upx;
        height: 30upx;
      }
    }
  }

  /deep/ .uni-scroll-view-content {
    display: flex !important;
  }
}

.filter.cover {
  z-index: 12;
}

.active {
  color: #1ca9ff;
}

.select {
  .border-1px(top, #f1f1f2);
  position: fixed;
  z-index: 9;
  left: 0;
  right: 0;
  height: 700upx;
  color: #888990;
  background: #ffffff;

  .screen-inner.inner {
    .flex(row, flex-start);
    padding: 0;
  }

  .inner {
    padding: 0 30upx;
    height: 100%;
    overflow-y: auto;

    .single-option {
      .flex();
      position: relative;
      padding: 30upx 0;
      .border-1px(bottom, #f1f1f2);
    }

    .single.active {
      color: #1ca9ff;
    }

    .sort,
    .options {
      height: 100%;

      .single {
        height: 80upx;
        line-height: 80upx;
      }
    }

    .sort {
      padding-left: 40upx;
      width: 200upx;
    }

    .options {
      padding: 0 20upx;
      width: calc(100% - 200upx);

      .single {
        .flex();
      }
    }
  }
}

.single-option.input {
  padding: 20upx 0;

  .label {
    .flex(row, center);
    width: 100%;
  }

  uni-input {
    width: 318upx;
    height: 60upx;
    text-align: center;
    border-radius: 50upx;
    background-color: rgba(136, 137, 144, 0.1);
  }

  .line {
    margin: 0 20upx;
  }
}

.mask {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 7;
  background: rgba(0, 0, 0, 0.5);
}

.arrow-icon {
  width: 18upx;
  height: 11upx;
}
</style>